<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>销售订单-详情</title>
    <!-- 引入 Element UI 的样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="container header-content">
          <div class="logo">订单管理系统</div>
          <!-- <div class="user-info">
            <div class="user-avatar"></div>
            <span>{{ username }}</span>
          </div> -->
        </div>
      </div>
      <div class="container main-content">
        <div class="content" style="width: 100%">
          <h1 class="module-title">经销商信息</h1>
          <div class="center-grid mb-20">
            <el-descriptions :column="4">
              <el-descriptions-item v-for="item in dealerInfoHeader" :key="item.fieldApi" :label="item.label">
                <div>{{ formInfo[item.fieldApi] ? formInfo[item.fieldApi]:'-'}}</div>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <h1 class="module-title">车辆信息</h1>
          <div class="center-grid mb-20">
            <el-table v-loading="tableLoading" :data="tableData" stripe style="width: 100%">
              <el-table-column v-for="(item, index) in tableColumnData" :key="index" :label="item.fieldName"
                               min-width="150">
                <template slot-scope="scope">
                  <template> {{ scope.row[item.fieldApi] }} </template>
                </template>
              </el-table-column>
              <el-table-column label="操作" :resizable="false" :show-overflow-tooltip="false" min-width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" class="ml2" v-if="scope.row.convertStatus != '1'" @click="generateExecutionOrderSubmit(scope.row)"> 生成执行单 </el-button>
                  <el-button type="text" @click="openDetail(scope.row)"> 详情 </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <h1 class="module-title">基本信息</h1>
          <div class="center-grid mb-20">
            <el-descriptions :column="4">
              <el-descriptions-item v-for="item in baseInfoHeader" :key="item.fieldApi" :label="item.label">
                <div v-if="item.fieldApi==='status'">{{ getOptionsStr('so_status',formInfo[item.fieldApi]) }}</div>
                <div v-else-if="item.fieldApi==='soProgress'">{{ getOptionsStr('so_progress',formInfo[item.fieldApi]) }}</div>
                <div v-else>{{ formInfo[item.fieldApi] ? formInfo[item.fieldApi]:'-' }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </div>

        </div>
      </div>
      <!-- 添加或修改销售订单信息对话框 -->
      <el-dialog :title="generateExecutionOrderTitle" :visible.sync="executeDialog" width="600px" append-to-body>
        <el-form ref="form" :model="generateExecutionOrderForm" label-width="80px">
          <el-form-item label="车辆编号" prop="carCode">
            <el-input placeholder="请输入车辆编号" v-model="generateExecutionOrderForm.carCode" />
          </el-form-item>
          <el-form-item label="车架号" prop="carId">
            <el-input placeholder="请输入车架号" v-model="generateExecutionOrderForm.carId" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="generateExecutionOrderSubmit">确 定</el-button>
          <el-button @click="generateExecutionOrderCancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 展示车辆详情 -->
      <el-dialog title="车辆详情" :visible.sync="detailDialog" width="1200px" append-to-body>
        <el-form ref="form" :model="rowDetail" label-width="100px">
          <div>
            <el-descriptions class="margin-top" :column="3">
              <el-descriptions-item label="车型号">{{rowDetail.carModelCode }}</el-descriptions-item>
              <el-descriptions-item label="车平台">{{rowDetail.carPlatformCode}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <el-table border :data="optionDatas" style="width: 100%; max-height: 500px; overflow-y: auto">
            <el-table-column prop="optionName" label="配置清单" width="300" align="center"> </el-table-column>
            <el-table-column prop="details" label="明细" align="center"> </el-table-column>
          </el-table>
        </el-form>
      </el-dialog>
    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>

    <script>
      checkAuthentication(2)
      new Vue({
        el: '#app',
        components: {},
        data() {
         return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
            userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
            // username: '张三',
            // avatorURL: '',
            dicts: ['so_status', 'so_progress'],
            optionsObj: {},
            tableData: [],
            tableColumnData: [
              {
                fieldName: '车型号',
                fieldApi: 'carModelCode'
              },
              {
                fieldName: '品牌',
                fieldApi: 'brand'
              },
              {
                fieldName: '车平台',
                fieldApi: 'carPlatformCode'
              },
              {
                fieldName: '执行订单编号',
                fieldApi: 'eoCode',
              },
              {
                fieldName: '来源地',
                fieldApi: 'sourceLocation'
              },
              {
                fieldName: '车内布局',
                fieldApi: 'carLayout'
              },
              {
                fieldName: '单价',
                fieldApi: 'soPrice'
              }
            ],
            tableLoading: false,
            baseInfoHeader: [
              { label: '销售订单编号', fieldApi: 'soCode' },
              { label: '订单总价（元）', fieldApi: 'soAmount' },
              { label: '折扣', fieldApi: 'soRate' },
              { label: '税费（元）', fieldApi: 'taxAmount' },
              { label: '订单状态', fieldApi: 'status' },
              { label: '责任单位', fieldApi: 'responsibilityDept' },
              { label: '预计交付时间', fieldApi: 'expectedTime' },
              { label: '订单跟踪', fieldApi: 'soProgress' },
              { label: '创建人', fieldApi: 'createTime' },
              { label: '创建时间', fieldApi: 'createTime' }
            ],
            dealerInfoHeader: [
              { label: '门店名称', fieldApi: 'dealerName' },
              { label: '门店联系人', fieldApi: 'contactName' },
              { label: '门店联系方式', fieldApi: 'createDate' },
              { label: '门店地址', fieldApi: 'dealerAddress' }
            ],
            formInfo: {},
            detailDialog: false, // 详情
            rowDetail: {},
            optionDatas: [],
            // 生成执行单
            executeDialog: false,
            generateExecutionOrderTitle: '',
            generateExecutionOrderForm: {},
            detailId: '',
            root_host: root_host,
            request_host: request_host
          }
        },
        created() {
          this.init()
        },
        methods: {
          init() {
            this.detailId = getUrlParameter('id')
            this.getOptions()
            this.getOrderInfo()
            this.getsoCars()
          },
          getOptions() {
            this.dicts.forEach((item) => {
              axios.get(`${this.request_host}/system/dict/data/type/${item}`).then((response) => {
                this.$set(this.optionsObj, item, {})
                if (response.status == 200) {
                  response.data.data.map((item1) => {
                    this.optionsObj[item][item1.dictValue] = item1.dictLabel
                  })
                }
              })
            })
          },
          getOptionsStr(opt, value) {
            if (this.optionsObj[opt] && value) {
              return this.optionsObj[opt][value]
            }
            return ''
          },
          getOrderInfo() {
            try {
              axios.get(`${this.request_host}/system/order/${this.detailId}`).then((response) => {
                if (response.status == 200) {
                  this.formInfo = response.data.data
                  console.log(this.formInfo)
                }
              })
            } catch (error) {
              console.error('请求失败:', error)
            }
          },
          getsoCars() {
            try {
              axios.get(`${this.request_host}/system/soCars/querySoCarsBySoId?id=${this.detailId}`).then((response) => {
                if (response.status == 200) {
                  this.tableData = response.data
                }
              })
            } catch (error) {
              console.error('请求失败:', error)
            }
          },

          // 生成执行订单
          openExecute(row) {
            this.generateExecutionOrderForm.soCarsId = row.id
            this.generateExecutionOrderTitle = '生成执行订单'
            this.executeDialog = true
          },
          generateExecutionOrderSubmit(row) {
            this.generateExecutionOrderForm.soCarsId = row.id
            this.$confirm(`确认生成该记录的执行订单？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 新增
              axios.post(`${this.request_host}/system/executeOrder/createOrder`, this.generateExecutionOrderForm)
                      .then(response => {
                        if (response.data.code === 200){
                          //window.location.reload()
                          window.open('../executeOrder/execute_order_list.html')
                        }else {
                          this.$message.error(response.data.msg)
                        }

                      }).catch(error => {
                this.$message.error(`创建失败`);
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              });
            });

          },
          generateExecutionOrderCancel() {
            this.executeDialog = false
          },
          openDetail(row) {
            this.rowDetail = row
            this.optionDatas = row.soOptionVo
            this.detailDialog = true
          }
        }
      })
    </script>
    <style>
      .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
      }
    </style>
  </body>
</html>
